<template>
  <div :class="`notification ${type}`">
    <div>
      <i :class="`el-icon-${type}`"></i>
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class Notification extends Vue {
  @Prop({
    type: String,
    default: "error",
  })
  type: "error" | "info" | "warning" | "success";

  @Prop({
    type: String,
    default: "",
  })
  time: string;
}
</script>

<style lang="scss" scoped>
.notification {
  display: flex;
  width: 330px;
  padding: 14px 26px 14px 13px;
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  position: fixed;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
    bottom 0.3s;
  overflow: hidden;
  opacity: 0.5;
}
.error {
  background-color: red;
}
</style>
